<template>
	<view>
		<view style="margin-top: 8rpx; margin-left: 9rpx;">
			<u--text type="warning" text="注意:请仔细核对明细数据再做审核操作"></u--text>
		</view>
		<view>
			<uni-section :title="`审核明细`" type="line"></uni-section>
			<!-- <uni-table ref="table" :loading="detailLoading"
				border
				stripe 
				type="" 
				style="margin-left: 6rpx;margin-right: 6rpx;padding-bottom: 40px;"
				emptyText="暂无更多数据">
				<uni-tr style="background-color: #dbfbdb;">
					<uni-th align="left" width="5" style="font-size: 12px;color: #62c188;">序号</uni-th>
					<uni-th align="left" width="60" style="font-size: 12px;color: #62c188;">物料编码</uni-th>
					<uni-th align="left" width="80" style="font-size: 12px;color: #62c188;">物料名称</uni-th>
					<uni-th align="left" width="120" style="font-size: 12px;color: #62c188;">物料规格</uni-th>
					<uni-th align="left" width="80" style="font-size: 12px;color: #62c188;">申请数量</uni-th>
					<uni-th align="left" width="60" style="font-size: 12px;color: #62c188;">补/退数量</uni-th>
					<uni-th align="left" width="100" style="font-size: 12px;color: #62c188;">退料类型</uni-th>
					<uni-th align="left" width="140" style="font-size: 12px;color: #62c188;">补/退料原因</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in allSubMaterialList" :key="index">
					<uni-td align="left" style="font-size: 12px;text-align: left;">{{ index+1 }}</uni-td>
					<uni-td align="left" style="font-size: 12px;text-align: left;">{{ item.bomCode }}</uni-td>
					<uni-td align="left" style="font-size: 12px;text-align: left;">{{ item.bomName }}</uni-td>
					<uni-td align="left" style="font-size: 12px;text-align: left;">{{ item.bomStandard }}</uni-td>
					<uni-td align="left" style="font-size: 12px;text-align: left;">{{ item.pickedItemQty }}</uni-td>
					<uni-td align="left" style="font-size: 12px;text-align: left;">{{ item.pickedItemQty }}</uni-td>
					<uni-td align="left" style="font-size: 12px;text-align: left;">{{ item.returnType }}</uni-td> 
					<uni-td align="left" style="font-size: 12px;text-align: left;">{{ item.attr1 }}</uni-td>
				</uni-tr>
			</uni-table> -->
			<view class="card-container">
				<view class="card-wrap">
					<!-- <view class="card-item">
						订单合同：<u-tooltip :text="contractCode" bgColor="#e3e4e6"></u-tooltip>
					</view> -->
					<uni-section :title="`订单合同：${contractCode}`" type="line"></uni-section>
				
					<!-- 产品列表（主表） -->
					<uni-section :title="`产品列表 (审批编号：${flowNo}/${transferNo})`" type="line"></uni-section>
					<view style="margin-top: 0px;">
						<uni-table ref="tableOfProduct" :loading="detailLoading"
							border
							stripe 
							type="" 
							emptyText="暂无更多数据">
						<uni-tr style="background-color: #dbfbdb;">
							<uni-th align="left" width="5" style="font-size: 12px;color: #62c188;">序号</uni-th>
							<uni-th align="left" width="40" style="font-size: 12px;color: #62c188;">产品编码</uni-th>
							<uni-th align="left" width="60" style="font-size: 12px;color: #62c188;">物料编码</uni-th>
							<uni-th align="left" width="80" style="font-size: 12px;color: #62c188;">物料名称</uni-th>
							<uni-th align="left" width="80" style="font-size: 12px;color: #62c188;">物料规格</uni-th>
							<uni-th align="left" style="font-size: 12px;color: #62c188;">生产数量</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in workOrderList" :key="index">
							<uni-td align="left" style="font-size: 12px;text-align: left;">{{ index+1 }}</uni-td>
							<uni-td align="left" style="font-size: 12px;text-align: left;">{{ item.productCode }}</uni-td>
							<uni-td align="left" style="font-size: 12px;text-align: left;">{{ item.bomCode }}</uni-td>
							<uni-td align="left" style="font-size: 12px;text-align: left;">{{ item.bomName }}</uni-td>
							<uni-td align="left" style="font-size: 12px;text-align: left;">{{ item.bomStandard }}</uni-td>
							<uni-td align="left" style="font-size: 12px;text-align: left;">{{ item.maxPickingNum }}</uni-td>
						</uni-tr>
						</uni-table>
					</view>
					
					<!-- 用料清单（物料明细表） -->
					<uni-section :title="`用料清单`" type="line"></uni-section>
					<view style="margin-top: 1px;">
						<u--text type="warning" text="注意:有高亮颜色的为这次审核变动的数据"></u--text>
						<uni-table ref="table" :loading="detailLoading"
							border
							stripe 
							type="" 
							style="padding-bottom: 1px;"
							emptyText="暂无更多数据">
							<uni-tr style="background-color: #dbfbdb;">
								<uni-th align="left" width="5" style="font-size: 12px;color: #62c188;">序号</uni-th>
								<uni-th align="left" width="30" style="font-size: 12px;color: #62c188;">产品数</uni-th>
								<uni-th align="left" width="60" style="font-size: 12px;color: #62c188;">物料编码</uni-th>
								<uni-th align="left" width="80" style="font-size: 12px;color: #62c188;">物料名称</uni-th>
								<uni-th align="left" style="font-size: 12px;color: #62c188;">物料规格</uni-th>
								<uni-th align="left" width="60" style="font-size: 12px;color: #62c188;">申请数量</uni-th>
								<uni-th align="left" width="60" style="font-size: 12px;color: #62c188;">应发数量</uni-th>
								<uni-th align="left" width="60" style="font-size: 12px;color: #62c188;">已领数量</uni-th>
								<uni-th align="left" width="60" style="font-size: 12px;color: #62c188;">未领数量</uni-th>
								<uni-th align="left" width="80" style="font-size: 12px;color: #62c188;color: firebrick;">补/退料数量</uni-th>
								<uni-th align="left" width="90" style="font-size: 12px;color: #62c188;color: firebrick;">补/退料类型</uni-th>
								<uni-th align="left" width="100" style="font-size: 12px;color: #62c188;color: firebrick;">补/退料原因</uni-th>
							</uni-tr>
							<uni-tr v-for="(item, index) in allSubMaterialList" :key="index">
								<uni-td align="left" :style="getTdStyle(item,0)">{{ index+1 }}</uni-td>
								<uni-td align="left" :style="getTdStyle(item,1)">{{ item.parentBomCodeList.length }}</uni-td>
								<uni-td align="left" :style="getTdStyle(item,2)">{{ item.bomCode }}</uni-td>
								<uni-td align="left" :style="getTdStyle(item,3)">{{ item.bomName }}</uni-td>
								<uni-td align="left" :style="getTdStyle(item,4)">{{ item.bomStandard }}</uni-td>
								<uni-td align="left" :style="getTdStyle(item,5)">{{ item.appQty }}</uni-td> <!-- 申请数量 -->
								<uni-td align="left" :style="getTdStyle(item,6)">{{ item.needQty }}</uni-td> <!-- 应发数量 -->
								<uni-td align="left" :style="getTdStyle(item,7)">{{ item.pickedQty }}</uni-td> <!--已领数量-->
								<uni-td align="left" :style="getTdStyle(item,8)">{{ item.noPickedQty }}</uni-td> <!--未领数量-->
								<uni-td align="left" :style="getTdStyle(item,9)">{{item.todayRecvNum}}</uni-td>
								<uni-td align="left" :style="getTdStyle(item,10)">{{getReturnTypeDesc(item.returnType)}}</uni-td>
								<uni-td align="left" :style="getTdStyle(item,11)">{{getReturnReasonDesc(item.returnReason)}}</uni-td>
							</uni-tr>
						</uni-table>
					</view>
				</view>
			</view>
		</view>
		<view>
			<uni-section :title="`审核节点`" type="line"></uni-section>
			<!-- <u-steps
				:current="1"
				direction="column"
				style="margin-left: 20px;"
			>
				<u-steps-item
					error
					title="发起申请"
					desc="杨志 2024-01-03 10:30"
				>
				</u-steps-item>
				<u-steps-item
					title="待审核"
					desc="审核人: 李谨"
				>
				</u-steps-item>
				<u-steps-item
					title="待审核"
					desc="审核人: 李四"
				>
				</u-steps-item>
			</u-steps> -->
			<u-steps
				:current="currentIndex"
				direction="column"
				style="margin-left: 20px;"
			>
				<u-steps-item
					v-for="(item,index) in auditFlowList"
					:error="item.flowStatus === 'REJECT'"
					:title="item.title"
					:desc="item.desc"
				>
				</u-steps-item>
			</u-steps>
		</view>
		<view style="margin: 20px;padding-bottom: 10px;">
			<uni-row v-if="curNodeStatus !== null">
				<uni-col :span="12">
					<u-button
						type="primary"
						text="同意"
						plain
						:disabled="curNodeStatus != 'PENDING'"
						customStyle="width: 240rpx;"
						@click="pass()"
					></u-button>
				</uni-col>
				<uni-col :span="12">
					<u-button
						type="error"
						text="拒绝" 
						plain
						:disabled="curNodeStatus != 'PENDING'"
						customStyle="width: 240rpx;"
						@click="reject()"
					></u-button>
				</uni-col>
			</uni-row>
		</view>
		
		<u-notify ref="uNotify"></u-notify>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose"  
				mode="input" 
				:title="applyTitle" 
				placeholder="输入审核建议" 
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	
import * as workorderApi from '@/api/order/workorder';
export default {
	data() {
		return {
			detailLoading: false,
			
			contractCode: null,
			orderCode: null,
			workOrderList: [],
			allSubMaterialList: [],
			
			transferNo: null,
			token: null,
			flowNo: null,
			
			currentIndex: 0,
			curNodeStatus: null,
			auditFlowList: [],
			approveRemark: null,
			applyTitle: '输入审核通过建议',
			
			curApplyAudit: null,
			
			sendStatus: null,
			dbSendStatus: '',
			allSubMaterialList: [],
			
			notifyData: {
				top: 4,
				message: 'notify顶部提示',
				type: 'warning',
				color: '#ffffff',
				bgColor: '',
				fontSize: 12,
				duration: 2500,
				safeAreaInsetTop: false
			},
		}
	},
	onLoad(options) {
		console.log("请求参数:", options);
		if (!options.transferNo) {
		}
		this.transferNo = options.transferNo;
		this.flowNo = options.flowNo;
		this.token = options.token || '';
		
		if (!this.transferNo) {
			this.transferNo = this.getQueryParam("transferNo");
		}
		if (!this.token) {
			this.token = this.getQueryParam("token");
		}
		if (!this.flowNo) {
			this.flowNo = this.getQueryParam("flowNo");
		}
		
		if (!this.transferNo) {
			this.notifyError(`审核参数transferNo存在非法，审核无法进行`);
			return;
		}
		console.log("this.transferNo,this.token:,flowNo", this.transferNo, this.token, this.flowNo);
		// if (this.token) {
		// 	this.notifyError(`审核参数token存在非法，审核无法进行`);
		// }
		this.queryPickedDetailByTransferNo();
		this.queryCurrentFlowList();
	},
	methods: {
		getTdStyle(row, col) {
			let startStyle = 'font-size: 12px;text-align: left;';
			if (row.todayRecvNum) {
				if (col === 9) {
					return startStyle + "background-color: aquamarine;color: red;"
				}
				return startStyle + "background-color: aquamarine;";
			}
			return startStyle;
		},
		getReturnTypeDesc(type) {
			if (!type) {
				return '';
			}
			if (type === "1") {
				return '良品退料';
			} else if (type === "2") {
				return '来料不良退料';
			} else if (type === "3") {
				return '作业不良退料';
			}
			return '';
		},
		getReturnReasonDesc(type) {
			if (!type) {
				return '';
			}
			if (type === "TLYYO1_SYS") {
				return '良品退料';
			} else if (type === "TLYYO2_SYS") {
				return '来料不良';
			} else if (type === "TLYYO3_SYS") {
				return '作业不良';
			}
			return '';
		},
		getQueryParam(param) {
		    // 获取URL中的查询字符串部分
		    const urlParams = new URLSearchParams(window.location.search);
		    return urlParams.has(param) ? urlParams.get(param) : null;
		},
		queryPickedDetailByTransferNo() {
			const params = {
				transferNo: this.transferNo,
				sendStatus: this.sendStatus,
				applyToken: this.token,
			};
			workorderApi.queryPickedDetailByBatchNo(params).then(res => {
				if (res && res.data) {
					this.allSubMaterialList = res.data.allSubMaterialList || [];
				}
				this.workOrderList = res.data.mainList || [];
				this.contractCode = res.data.contractCode;
				this.orderCode = res.data.orderCode;
			}).catch(err => {
				this.allSubMaterialList = [];
				this.workOrderList = [];
				// 提交异常
				console.error("退/补料详情查询发生异常", err);
				this.notifyError(`退/补料详情查询发生异常！请稍后重试`);
			});
		},
		queryCurrentFlowList() {
			const params = {
				flowNo: this.flowNo,
			};
			workorderApi.queryCurrentFlowList(params).then(res => {
				if (res && res.data) {
					this.currentIndex = res.data.currentIndex;
					this.curNodeStatus = res.data.curNodeStatus;
					this.auditFlowList = res.data.auditFlowBoList || [];
				} else {
					this.auditFlowList = [];
				}
			}).catch(err => {
				this.auditFlowList = [];
				// 提交异常
				console.error("查找审批流数据发生异常", err);
				this.notifyError(`查找审批流数据发生异常！请稍后重试`);
			});
		},
		pass() {
			this.curApplyAudit = 'PASS';
			this.applyTitle = '输入审核通过建议';
			this.$refs.inputDialog.open();
		},
		reject() {
			this.curApplyAudit = 'REJECT';
			this.applyTitle = '输入审核拒绝建议';
			this.$refs.inputDialog.open();
		},
		confirm() {
			let params = {
				flowNo: this.flowNo,
				approveRemark: this.approveRemark,
				transferNo: this.transferNo,
				sendStatus: this.sendStatus,
				applyToken: this.token,
			};
			workorderApi.applyByStatus(params).then(res => {
				if (res) {
					this.notifySuccess(`${res.msg}！`);
					this.$refs.inputDialog.close();
				} else {
					this.notifyError(`退/补料审核发生异常！请稍后重试`);	
				}
				this.queryCurrentFlowList();
				this.queryPickedDetailByTransferNo();
			}).catch(err => {
				// 提交异常
				console.error("退/补料审核发生异常", err);
				this.notifyError(`退/补料审核发生异常！请稍后重试`);
			});
		},
		dialogInputConfirm(val) {
			console.log("val:approveRemark:", val, this.approveRemark);
			this.approveRemark = val;
			if (this.curApplyAudit === 'PASS') {
				// 通过
				this.sendStatus = "PASS";
			} else if (this.curApplyAudit === 'REJECT') {
				// 拒绝
				this.sendStatus = "REJECT";
			}
			this.confirm();
		},
		notifyError(message) {
			this.notifyData.type = 'error';
			this.notifyData.message = message;
			this.$nextTick(() => {
				this.$refs.uNotify.show({
					...this.notifyData
				});
			});
		},
		notifySuccess(message) {
			this.notifyData.type = 'success';
			this.notifyData.message = message;
			this.$nextTick(() => {
				this.$refs.uNotify.show({
					...this.notifyData
				});
			});
		},
	}
}
</script>

<style lang="scss" scoped>

.card-container{
	width: 100%;
	min-height: 100%;
	box-sizing: border-box;
	padding: 8rpx;
	background-color: #ECECEC;
}
.card-wrap{
	padding: 12rpx;
	border-radius: 12rpx;
	margin-bottom: 12rpx;
	background-color: #FFF;
	border: 1px solid #ddd; /* 默认边框 */
	transition: background-color 0.3s, border-color 0.3s;
	.card-item{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		padding-bottom: 20rpx;
		color: #111111;
	}
	.card-item-txt{
		flex:1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
.card-btns{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.card-btns uni-button {
  flex: 1;
  margin: 0 5px; /* 调整按钮间距 */
}
.card-wrap-selected {
  border-color: #007bff; /* 选中状态的边框颜色 */
  background-color: #e7f0ff; /* 选中状态的背景颜色 */
}

.demo-layout {
	// height: 25px;
	border-radius: 0px;
}
.bg-purple {
	background: #CED7E1;
}
.bg-purple-light {
	background: #e5e9f2;
}
.border-row {
  box-sizing: border-box; 
  border-top: 1px solid #dfe2e5; 
  border-left: 1px solid #dfe2e5;
  border-right: 1px solid #dfe2e5; 
  border-bottom: 0.2px solid #dfe2e5;
  padding: 8px;             /* 可选：内边距 */
}
/deep/ .u-collapse-item__content__text {
	padding: 2px 8px !important;
	color: #606266 !important;
	font-size: 14px !important;
	line-height: 18px !important;
}

.card-item-layout{
	border-radius: 6rpx;
	background-color: #FFF;
	// border: 1px solid #ddd; /* 默认边框 */
	transition: background-color 0.3s, border-color 0.3s;
	align-items: left;
	font-size: 28rpx;
	color: #40485d;
}

.card-item-single{
	border-radius: 6rpx;
	background-color: #FFF;
	border: 1px solid #ddd; /* 默认边框 */
	transition: background-color 0.3s, border-color 0.3s;
	align-items: left;
	font-size: 30rpx;
	color: #40485d;
}

.float-button {
  position: fixed;
  bottom: 6px;
  left: 50%;
  // width: 52px;
  // height: 52px;
  // transform: translateX(-50%);
  z-index: 10;
}
.float-button-right {
  position: fixed;
  bottom: 6px;
  right: 50%;
  // width: 52px;
  // height: 52px;
  // transform: translateX(-50%);
  z-index: 10;
}
</style>
